<template>
	<div class="body">
		<header>猫眼电影</header>
		<!-- <Movies></Movies> -->
		<transition enter-active-class="animate__animated animate__backInRight" leave-active-class="animate__animated animate__lightSpeedOutLeft">
			<keep-alive>
				<router-view></router-view>
			</keep-alive>
		</transition>
		<nav class="footer">
			<!-- <van-icon class-prefix="iconfont" name="cart" /> -->
			<ul class="bottom_nav">
				<!-- <router-link tag="li" to="/home/movies" class="iconfont" active-class="active">
					<span>电影</span>
					<i>&#xe642;</i>
				</router-link>
				<router-link tag="li" to="/home/theaters" class="iconfont" active-class="active">
					<span>影院</span>
					<i>&#xe8c0;</i>
				</router-link>
				<router-link tag="li" to="/home/profile" class="iconfont" active-class="active">
					<span>我的</span>
					<i>&#xe60c;</i>
				</router-link> -->

				<van-tabbar v-model="active" active-color="#cd4c42" inactive-color="#ccc" fixed>
					<van-tabbar-item to="/home/movies">
						<span>电影</span>
						<template #icon="props">
							<!-- <img :src="props.active ? icon.active : icon.inactive" /> -->
							<van-icon class-prefix="iconfont" name="ziyuan" size="28" tag="li" />
						</template>
					</van-tabbar-item>
					<van-tabbar-item to="/home/theaters">
						<span>影院</span>
						<template #icon="props">
							<!-- <img :src="props.active ? icon.active : icon.inactive" /> -->
							<van-icon class-prefix="iconfont" name="yingyuan" size="28" tag="li" />
						</template>
					</van-tabbar-item>
					<van-tabbar-item to="/home/profile">
						<span>我的</span>
						<template #icon="props">
							<!-- <img :src="props.active ? icon.active : icon.inactive" /> -->
							<van-icon class-prefix="iconfont" name="wode" size="28" tag="li" />
						</template>
					</van-tabbar-item>
				</van-tabbar>
			</ul>
		</nav>
	</div>
</template>
<script>
import Vue from 'vue'
import { Icon } from 'vant'
import Movies from '@/views/home/movies/Movies'
import { Tabbar, TabbarItem } from 'vant'

Vue.use(Tabbar)
Vue.use(TabbarItem)
Vue.use(Icon)

export default {
	components: {
		Movies
	},
	data() {
		return {
			active: 0
		}
	},
	methods: {}
}
</script>
<style lang="scss" scoped>
html {
	color: red;
}
.body {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.body .footer {
	height: 0.44rem;
	border-top: 2px solid #ccc;
}
.body header {
	background-color: #cd4c42;
	color: #fff;
	height: 0.44rem;
	font-size: 0.16rem;
	font-weight: bold;
	text-align: center;
	line-height: 0.44rem;
}

@font-face {
	font-family: 'iconfont';
	src: url('~@/assets/nav/iconfont.woff2?t=1622546632932') format('woff2'), url('~@/assets/nav/iconfont.woff?t=1622546632932') format('woff'),
		url('~@/assets/nav/iconfont.ttf?t=1622546632932') format('truetype');
}
.iconfont {
	font-family: 'iconfont' !important;
	font-size: 0.22rem;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.iconfont-ziyuan:before {
	content: '\e642';
}
.iconfont-yingyuan:before {
	content: '\e8c0';
}
.iconfont-wode:before {
	content: '\e60c';
}

div .bottom_nav {
	display: flex;
	flex-direction: row;
	// justify-content: space-evenly;
	// align-items: center;
}

.footer ul.bottom_nav li {
	display: flex;
	flex-direction: column-reverse;
	flex: 1;
	justify-content: center;
	align-items: center;
}

.footer .bottom_nav li span {
	font-size: 0.001rem;
	// margin-top: -0.07rem;
	line-height: 0.03rem;
}

.active {
	color: #cd4c42;
}

.main_movie {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: scroll;
}

.main_movie .move_main {
	display: flex;
	flex: 1;
	overflow: scroll;
}

.main_movie .nav_ul {
	display: flex;
	border-bottom: 2px solid #ccc;
	height: 0.44rem;
}
.main_movie .nav_ul li {
	line-height: 0.44rem;
	text-align: center;
}
.nav_ul li:nth-child(1) {
	width: 0.45rem;
	border-right: 2px solid #ccc;
	position: relative;
}
.nav_ul li:nth-child(1) i {
	font-size: 0.11rem;
	color: #666;
}
.nav_ul li:nth-child(1) span {
	position: absolute;
	right: -3px;
	color: #666;
}
.nav_ul li:nth-child(2) {
	flex: 1;
	display: flex;
	justify-content: space-evenly;
}
.nav_ul li:nth-child(2) span {
	/* flex: 1; */
	font-size: 0.13rem;
}
.nav_ul li:nth-child(3) {
	width: 0.45rem;
	border-left: 2px solid #ccc;
}
.active_movie {
	color: #cd4c42;
	padding: 0 0.07rem;
	border-bottom: 2px solid #cd4c42;
}
</style>

<style >
html {
	font-size: 100px !important;
}
</style>
